<template>
	<el-splitter>
		<el-splitter-panel size="80%">
			<design ref="designCom" :data="quesData"></design>
		</el-splitter-panel>
		<el-splitter-panel>
			<Codemirror :disabled="true" style="height: 100%" :extensions="extensions" v-model="quesDataString"></Codemirror>
		</el-splitter-panel>
	</el-splitter>
	<button @click="getData" style="position: fixed; bottom: 40px; left: 20px">获取数据</button>
</template>
<script setup>
import "@wdy90/survey/design.css";
import { design } from "@wdy90/survey";
import { Codemirror } from "vue-codemirror";
import { json } from "@codemirror/lang-json";
import { EditorView } from "@codemirror/view";
import { lineNumbers } from "@codemirror/view";
import { onMounted, ref, reactive, computed } from "vue";
import { oneDark } from "@codemirror/theme-one-dark";
const designCom = ref(null);

const quesData = reactive({ title: "问卷标题", description: "副标题", scoreIs: false, children: [] });

onMounted(() => {
	designCom.value.initIds([]);
});
const quesDataString = computed(() => {
	return JSON.stringify(quesData, null, 2);
});
function getData() {
	//获取问卷的数据
	const data = designCom.value.getData();
	console.log(data);
}
const extensions = [json(), oneDark, lineNumbers(), EditorView.lineWrapping]; // 设置代码编辑器的扩展
</script>
